<template>
	<view class="back">
		<view class="container">
		  <!-- 用户头像和名称 -->
		  <view class="user-info">
			<image class="avatar" src="../../static/images/user.jpg"></image>
			<text class="user-name" @click="goToMemberPage">用户名称 </text>
		  </view>
		  <!-- 按钮组 -->
		  <view class="buttons">
			<text class="button" :class="{ active: activeButton === '全部数据' }" @click="toggleButton('全部数据')">
				全部数据
			</text>
			<text class="button" :class="{ active: activeButton === '血压' }" @click="toggleButton('血压')">
				血压
			</text>
			<text class="button" :class="{ active: activeButton === '血氧' }" @click="toggleButton('血氧')">
				血氧
			</text>
			<text class="button" :class="{ active: activeButton === '体温' }" @click="toggleButton('体温')">
				体温
			</text>
			 <!-- 数据卡片 -->
			<!-- <view
			  v-for="(card, index) in dataCards"
			  :key="index"
			  class="data-card"
			  :class="{ active: activeButton === card.title }"
			>
			  <! 数据卡片内容 -->
			 <!-- <text v-if="card.title === '全部数据'">全部数据卡片内容</text>
			  <text v-if="card.title === '血压'">血压数据卡片内容</text>
			  <text v-if="card.title === '血氧'">血氧数据卡片内容</text>
			  <text v-if="card.title === '体温'">体温数据卡片内容</text>
			</view> --> 
			
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeButton: '全部数据', // 默认选中的按钮
				      dataCards: [ // 数据卡片数组
				        { title: '全部数据' },
				        { title: '血压' },
				        { title: '血氧' },
				        { title: '体温' }
				      ]
			}
		},
		methods: {
			toggleButton(button) {
			      this.activeButton = button;
			    }
		}
	}
</script>

<style>

.back {
	width: 100vw;
	height: 50vh;
	left: 0px;
	top: 0px;
	background: linear-gradient(179.81deg, #17A8E4 0.16%, #94D6E2 29.03%, #FFFFFF 70.53%);
}

.container {
  margin-top: 6%;
  padding: 30rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-name {
  font-size: 28rpx;
}

.buttons {
	margin-top: 7%;
	margin-left: 5%;
	margin-right:5%;
  display: flex;
  justify-content:space-between;
  align-items:center;
}

.button {
	font-size: 35rpx;
	color:#f6f6f6;
/*  margin-right: 10upx; */
  cursor: pointer;
}

.button.active {
	font-weight: bolder;
	color: #FFFFFF;
	text-decoration: underline;
}

</style>
